import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  // strict:true, //严格模式
  state: { //组件共享的属性都放在这
    num: 100,
    products:[],
    msg:"风秋月冷的底眼泻流"
  },
  getters: { //数据预处理，相当于computed
    reverseMsg(state){
      return state.msg.split("").reverse().join("")
    }
  },
  mutations: { //修改state的唯一方式，不能操作异步，操作异步，调试工具可能检测不到
    // 由一个类型和一个处理函数组成，接收state作为第一个参数
    INCREASE(state) {
      state.num++
    },
    DECREASE(state, payload) {
      console.log(payload);
      state.num=state.num-payload
    },
    SET_PRODUCTS(state,payload){
      console.log(payload);
      state.products=payload
    }
  },
  actions: { //发送异步请求
    // 由类型和处理函数组成
    // 接收context作为第一个参数
    // 使用dispatch触发action
    // 可以操作异步
    GET_PRODUCTS(context,payload){
      // context上下文就是vuex实例
      // console.log(context);
      // console.log(payload);
      fetch("http://chst.vip/data/index.json")
      .then(body=>body.json())
      .then(res=>{
        console.log(res);
        context.commit('SET_PRODUCTS',res.data)
        console.log(context.state);
      })
    }
  },
  modules: { //模块化
  },
});